<template>
  <div id="middle-container">
    <div class="middleContainer">
      <div class="middleContainer-title">
        <digital-flop />
      </div>
      <div class="container">
        <dv-capsule-chart class="lc1-chart" :config="config" />
        <!-- <dv-decoration-2 style="height:10px;" /> -->
        <!-- <div class="leng">
          <div>
            预警信息
          </div>
          <div style="margin-top:5px">
            <span class="commonSpan" style="background-color:red" />
            <span>红色</span>
            <span>(2)</span>
          </div>
          <div style="margin-top:5px">
            <span class="commonSpan" style="background-color:yellow" />
            <span>黄色</span>
            <span>(3)</span>
          </div>
          <div style="margin-top:5px">
            <span class="commonSpan" style="background-color:blue" />
            <span>蓝色</span>
            <span>(1)</span>
          </div>
          <div style="margin-top:5px">
            <span class="commonSpan" style="background-color:orange" />
            <span>橙色</span>
            <span>(1)</span>
          </div>
        </div> -->
        <!-- <mapper /> -->
      </div>
    </div>
  </div>

</template>
<script>
// import mapper from './map.vue';
import digitalFlop from './digitalFlop';
export default {
  components: {
    // mapper,
    digitalFlop
  },
  data() {
    return {
      config: {
        data: [
          {
            name: '智慧旅游项目 招投标',
            value: 67
          },
          {
            name: '诸暨OA项目 建设中',
            value: 30
          },
          {
            name: '古城办项目 灰度测试',
            value: 50
          },
          {
            name: '市药监局项目 谋划中',
            value: 56
          },
          {
            name: '绍兴市数字改革平台 建设中',
            value: 70
          },
          {
            name: '嵊州市城市大脑 招投标',
            value: 78
          },
          {
            name: '组织部干部换届系统 招投标',
            value: 70
          },
          {
            name: '不动产共享平台 招投标',
            value: 10
          },
          {
            name: '纪检监察平台 灰度测试',
            value: 56
          },
          {
            name: '不动产共享平台 招投标',
            value: 10
          },
          {
            name: ' 新昌县OA办公系统 招投标',
            value: 44
          },
          {
            name: '纪检监察平台 灰度测试',
            value: 56
          },
          {
            name: '其他',
            value: 48
          }
        ],
        colors: ['#00baff', '#3de7c9', '#fff', '#ffc530', '#469f4b'],
        unit: '百分比'
      }
    };
  }
};
</script>

<style lang='scss' scoped >
   .middleContainer{
    border: 1px solid #848383;
    height: calc(65vh);
    border-radius: 10px;
   }
   .middleContainer-title{
     margin-top: 10px;
     font-size: 18px;
     font-weight: bolder;
     color: #fff;
     text-align: center
   }
   .leng{
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 999;
    width: 100px;
    height: 140px;
    opacity: 0.55;
    color: #fff;
    background-color: black;
    text-align: center;
    padding:10px;
    font-size:12px;
   }
   .commonSpan{
     width:12px;
     height:12px;
     display:inline-block;
   }
  .dv-capsule-chart .capsule-item {
    -webkit-box-shadow: 0 0 3px #999;
    box-shadow: 0 0 3px #999;
   height: calc(1.8vh) !important;
    margin: 9px 0px;
    border-radius: 5px;
}
 .dv-capsule-chart .capsule-item .capsule-item-column {
    position: relative;
    height: calc(1.8vh) !important;
    margin-top: 1px;
    border-radius: 5px;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}
.container{
  padding:10px;
  position:relative;
  overflow-y: auto;
  height: calc(65vh - 120px);
}

</style>
